<template>
  <div class="pvModuleResultDetail">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:10px;">
      <el-breadcrumb-item><img style="width: 16px;vertical-align: middle;margin-right: 5px" src="@/assets/indexPage/location.png"/> 诊断结果</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-weight:600;">
           诊断结果详情
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form ref="form" :model="form" class="searchLine" label-width="120px">
        <el-form-item label="任务开始时间" class="searchItem">
          <el-date-picker
            v-model="form.taskStartTime"
            size="small"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="searchItemWidth"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务编码" class="searchItem">
          <el-select v-model="form.taskNumber" size="small" placeholder="请选择任务编码" class="searchItemWidth"  @change="taskNumberChange" clearable filterable>
            <el-option v-for="(item, idx) in taskNumberList" :label="item.inspectTaskCode" :value="item.inspectTaskCode"  :key='item.inspectTaskCode + idx'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件名称" class="searchItem">
          <!-- <el-autocomplete
            v-model="form.fileName"
            :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'fileName')"
            placeholder="请输入文件名称"
            class="searchItemWidth"
            size="small"
            @select="handleSelect('fileName')"
          ></el-autocomplete> -->
          <el-input v-model="form.fileName" placeholder="请输入文件名称" size="small"  class="searchItemWidth" />
        </el-form-item>
        <el-form-item label="文件描述" class="searchItem" v-if="showAllItems">
          <!-- <el-autocomplete
            v-model="form.describe"
            class="searchItemWidth"
            size="small"
            :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'describe')"
            placeholder="请输入文件描述"
            @select="handleSelect('describe')"
          ></el-autocomplete> -->
          <el-input v-model="form.describe" placeholder="请输入文件描述" size="small"  class="searchItemWidth" />
        </el-form-item>
        <el-form-item label="诊断时间" class="searchItem" v-if="showAllItems">
          <el-date-picker
             v-model="form.checkTime"
             size="small"
             type="daterange"
             range-separator="-"
             class="searchItemWidth"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
        </el-form-item>
        <el-form-item label="诊断任务编码" class="searchItem" v-if="showAllItems">
          <el-input v-model="form.diagTaskCode" placeholder="请输入诊断任务编码" size="small"  class="searchItemWidth" />
        </el-form-item>
        <el-form-item label="诊断模型" class="searchItem" v-if="showAllItems" style="height:unset; min-height:41px;">
          <el-select v-model="form.title" size="small" placeholder="选择诊断模型" class="searchItemWidth" multiple clearable filterable @change="modelChange">
            <el-option label="全选" value=""></el-option>
            <el-option v-for="item in outerModelList" :label="item.diagModelName" :value="item.diagModelCode" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位名称" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.companyCode" size="small" placeholder="请选择单位" class="searchItemWidth" @change="companyChange" clearable filterable>
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站名称" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.stationCode" size="small" placeholder="请选择场站" class="searchItemWidth" @change="stationChange" clearable filterable>
            <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="日期" class="searchItem" style="width:450px">
          <el-date-picker
             v-model="form.checkTime1"
             size="small"
             type="daterange"
             range-separator="-"
             style="width:300px"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
        </el-form-item> -->
        <!-- <el-form-item label="任务编码" class="searchItem">
          <el-select v-model="form.inspectTaskCode" size="small" placeholder="请选择任务编码" class="searchItemWidth" @change="taskCodeChange" clearable>
            <el-option label="全选" value=""></el-option>
            <el-option v-for="item in taskList" :label="item.inspectTaskCode" :value="item.inspectTaskCode" :key="item.inspectTaskCode"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="原始文件" class="searchItem">
          <el-select v-model="form.oirFileName" size="small" placeholder="请选择已上传的原始文件" class="searchItemWidth" clearable>
            <el-option v-for="item in taskList" :label="item.inspectTaskCode" :value="item.inspectTaskCode" :key="item.inspectTaskCode"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="方阵编号" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.matrixNumber" size="small" placeholder="请选择方阵编号" class="searchItemWidth" @change="matrixNumberChange" clearable filterable>
            <el-option label="全选" value=""></el-option>
            <el-option v-for="item in matrixList" :label="item.pvArrayCode" :value="item.pvArrayCode" :key="item.pvArrayCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组串编号" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.pvClusterNumber" size="small" placeholder="请选择光伏组串编号" class="searchItemWidth" @change="pvClusterChange" clearable filterable>
            <el-option label="全选" value=""></el-option>
            <el-option v-for="item in pvArrayList" :label="item.pvStringCode" :value="item.pvStringCode" :key="item.pvStringCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组串位置描述" class="searchItem" v-if="showAllItems">
          <!-- <el-autocomplete
            v-model="form.pvArrayCodeDescribe"
            class="searchItemWidth"
            size="small"
            :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'pvArrayCode')"
            placeholder="请输入组串位置描述"
            @select="handleSelect('pvArrayCode')"
          ></el-autocomplete> -->
          <el-input v-model="form.stringDescribeInfo" placeholder="请输入组串位置描述" size="small"  class="searchItemWidth" />
        </el-form-item>
        <el-form-item label="组件编号" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.pvModuleNumber" size="small" placeholder="请选择光伏组件编号" class="searchItemWidth" clearable filterable>
            <el-option label="全选" value=""></el-option>
            <el-option v-for="item in pvModuleCodeList" :label="item.pvModuleCode" :value="item.pvModuleCode" :key="item.pvModuleCode"></el-option>
          </el-select>
        </el-form-item>
        <el-row style="text-align: right;">
          <el-button type="primary" icon="el-icon-search" size="small" @click="listSearch">查询</el-button>
          <el-button type="primary" size="small" @click="showAllItems = !showAllItems">高级搜索</el-button>
          <el-button @click="reset" size="small">重置</el-button>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <div class="title">
        结果详情列表
        <span @click="downloadFile" style="float:right;">
          <i class="el-icon-download"></i>
          下载表格
        </span>
      </div>
      <el-table
       :data="tableData"
       size="small"
       tooltip-effect="dark"
       max-height="500"
       border
       stripe
       v-loading="loading"
       style="width: 100%">
       <el-table-column
         label="任务开始时间"
         prop="taskStartTime"
         show-overflow-tooltip
         width="150"
         >
       </el-table-column>
       <el-table-column
         label="任务编码"
         prop="inspectTaskCode"
         show-overflow-tooltip
         width="150"
         >
       </el-table-column>
       <el-table-column
         prop="oriFileName"
         show-overflow-tooltip
         width="150"
         label="文件名称">
       </el-table-column>
       <el-table-column
         prop="fileInfo"
         show-overflow-tooltip
         width="150"
         label="文件描述">
       </el-table-column>
       <el-table-column
         prop="diagDay"
         show-overflow-tooltip
         width="150"
         label="诊断时间">
       </el-table-column>
       <el-table-column
         prop="diagModelName"
         show-overflow-tooltip
         width="200"
         label="诊断模型">
       </el-table-column>
       <el-table-column
         prop="picName"
         show-overflow-tooltip
         width="200"
         label="图片名称">
       </el-table-column>
       <el-table-column
         prop="defectivePosition"
         show-overflow-tooltip
         width="150"
         label="故障位置">
       </el-table-column>
       <el-table-column
         prop="pvArrayCode"
         show-overflow-tooltip
         width="150"
         label="故障所在的方阵">
       </el-table-column>
       <el-table-column
         prop="stringCntPosition"
         show-overflow-tooltip
         width="150"
         label="故障所在的组串">
       </el-table-column>
       <el-table-column
         prop="stringDescribeInfo"
         width="150"
         show-overflow-tooltip
         label="组串物理位置">
       </el-table-column>
       <el-table-column
         prop="moduleCntPosition"
         width="150"
         show-overflow-tooltip
         label="故障所在的组件">
       </el-table-column>
       <el-table-column
         width="180"
         label="诊断结果分析">
         <template slot-scope="scope">
           <span class="btn" @click="searchByType('按场站查询', scope.row)">按场站查询</span>
           <span class="btn" @click="searchByType('按组件查询', scope.row)">按组件查询</span>
         </template>
       </el-table-column>
      </el-table>
      <el-row class='pagination'>
        <el-pagination
          background
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!-- @size-change="handleSizeChange"
        :page-sizes="[100, 200, 300, 400]"
         sizes, -->
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import stationApi from "../../../api/stations"
  import matrixApi from "../../../api/matrix"
  import manualApi from "../../../api/manual"
  import pvClusterApi from "../../../api/pvCluster"
  import pvModuleApi from '../../../api/pvModule'
  import moment from 'moment'
  export default {
    name: "pvModuleResultDetail",
    data () {
      return {
        loading: false,
        showAllItems: false,
        tree: [],
        form: {
          companyCode: '',
          stationCode: '',
          matrixNumber: '',
          pvClusterNumber: '',
          pvModuleNumber:'',
          checkTime: null,
          title: [],
          taskNumber: '',
          taskStartTime: [],
          diagDay: [],
          fileName: '',
          fileRemark: '',
          stringDescribeInfo: '',
          diagTaskCode: ''
        },
        isFirstComeIn: true,
        outerModelList: [],
        pvModuleCodeList: [],
        tree: [],
        pvArrayList: [],
        matrixList: [],
        stationList: [],
        checkAll: '',
        isIndeterminate: true,
        selection: [],
        pageSize: 10,
        currentPage: 1,
        total: 0,
        tableData: [],
        myChart: null,
        myChart1: null,
        taskNumberList: [],
        downloadFileName: null,
        lastChecked: [],
        originFileList: []
      }
    },
    mounted() {
      this.getOuterModelList()
      this.getCompanies()
      let query = this.$route.query
      if (query && query.inspectTaskCode) {
        this.form.taskNumber = query.inspectTaskCode
        this.form.diagTaskCode = query.diagTaskCode
        this.form.title = query.diagModelCode && query.diagModelCode.split(',')
        this.listSearch()
      } else {
        this.form.taskStartTime = [moment().subtract(0.5, 'years'), moment()]
        this.listSearch()
      }
      this.getTaskList()
    },
    methods: {
      searchByType(type, row) {
        this.$router.push({
          path: '/taskResult/getResult/index',
          query: {
            type,
            ...row
          }
        })
      },
      taskNumberChange(value) {
        if (!value) {
          this.form.fileName = ''
          this.form.describe = ''
          this.form.taskNumber = ''
          return
        }
        let data = this.taskNumberList.find(item => item.inspectTaskCode === value)
        this.form.fileName = data && data.oriFileName
        this.form.describe = data && data.remark
      },
      getTaskList(flag) {
        if (flag && !this.isFirstComeIn) {
          this.taskNumberList = []
          this.form.taskNumber = ''
        }
        let param = {
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode,
          inspectDayStart: this.form.taskStartTime && this.form.taskStartTime[0] ? moment(this.form.taskStartTime[0]).format('YYYY-MM-DD HH:mm:ss') : '',
          inspectDayEnd: this.form.taskStartTime && this.form.taskStartTime[1] ? moment(this.form.taskStartTime[1]).format('YYYY-MM-DD HH:mm:ss') : '',
        }
        manualApi.getOriFileNameList(param).then(res => {
            if (res && res.status === 200 && res.data.code === 200) {
              this.taskNumberList = res.data.data
            }
        })
      },
      reset() {
        this.form = {
          companyCode: '',
          stationCode: '',
          matrixNumber: '',
          pvClusterNumber: '',
          pvModuleNumber:'',
          checkTime: null,
          title: [],
          taskNumber: '',
          taskStartTime: [],
          diagDay: [],
          fileName: '',
          fileRemark: '',
          diagTaskCode: ''
        }
        this.listSearch()
      },
      getCompanies() {
        stationApi.getCompanyList().then(res => {
          if (res && res.data.code === 200) {
            this.tree = res.data.data
            // if (this.isFirstComeIn && !(this.$route.query && this.$route.query.inspectTaskCode)) {
            //   this.form.companyCode = res.data.data[0].companyCode
            //   this.companyChange(res.data.data[0].companyCode)
            // }
          }
        })
      },
      getOuterModelList() {
        manualApi.getOuterModelList().then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.outerModelList = res.data.data
          }
        })
      },
      taskCodeChange(value) {
        if (!value) {
          this.originFileList = []
          return
        }
        stationApi.getOriginFiles({
          inspectTaskCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.originFileList = res.data.data
            this.form.oirFileName = ''
          }
        })
      },
      modelChange(value) {
        let val = this.getArrDifference(value, this.lastChecked)[0]
        if (value.length > this.lastChecked.length) {
          if (!val) {
            this.form.title = this.outerModelList.map(item => item.diagModelCode)
          } else {
            this.form.title = value
          }
        } else {
          if (!val) {
            this.form.title = []
          } else {
            this.form.title = this.form.title.filter(item => item !== val)
          }
        }
        this.lastChecked = [
          ...this.form.title
        ]
      },
      getArrDifference(arr1, arr2) {
        return arr1.concat(arr2).filter(function(v, i, arr) {
            return arr.indexOf(v) === arr.lastIndexOf(v)
        })
      },
      companyChange(value) {
        this.stationList = []
        this.form.stationCode = ''
        this.matrixList = []
        this.form.matrixNumber = ''
        this.pvArrayList = []
        this.pvModuleCodeList = []
        this.form.pvClusterNumber = ''
        this.form.pvModuleCode = ''
        // this.taskNumberList = []
        // this.form.taskNumber = ''
        this.getTaskList(true)
        if (!value) {
          return
        }
        manualApi.getStationByCompany({
          companyCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
            // this.form.stationCode = res.data.data[0].stationCode
            // if (this.isFirstComeIn) {
            //   this.listSearch()
            //   this.isFirstComeIn = false
            // }
          }
        })
      },
      stationChange(value) {
        this.matrixList = []
        this.form.matrixNumber = ''
        this.pvArrayList = []
        this.form.pvClusterNumber = ''
        this.pvModuleCodeList = []
        this.form.pvModuleCode = ''
        // this.form.inspectTaskCode = ''
        // this.taskNumberList = []
        this.form.taskNumber = ''
        if (!value) {
          return
        }
        this.getTaskList(true)
        // matrixApi.getmatrixNummberByCompany({
        //   stationCode: value
        // }).then(res => {
        //   if (res && res.status === 200 && res.data.code === 200) {
        //     this.matrixList = res.data.data
        //   }
        // })
        // matrixApi.listInspectTaskCode({
        //   stationCode: value
        // }).then(res => {
        //   if (res && res.status === 200 && res.data.code === 200) {
        //     this.taskList = res.data.data
        //   }
        // })
      },
      pvClusterChange(value) {
        this.pvModuleCodeList = []
        this.form.pvModuleCode = ''
        if (!value) {
          return
        }
        pvModuleApi.getpvModuleByPvCluster({
          pvStringCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.pvModuleCodeList = res.data.data
          }
        })
      },
      matrixNumberChange(value) {
        this.pvArrayList = []
        this.form.pvClusterNumber = ''
        this.pvModuleCodeList = []
        this.form.pvModuleCode = ''
        if (!value) {
          return
        }
        pvClusterApi.getpvClusterByMrtrixNumber({
          pvArrayCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.pvArrayList = res.data.data
          }
        })
      },
      listSearch() {
        this.loading = true
        let title = this.form.title
        if (this.form.title.length === this.outerModelList.length) {
          title = []
        }
        stationApi.pvModuleResultDetailSearch({
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode,
          pvArrayCode: this.form.matrixNumber,
          pvModuleCode: this.form.pvModuleNumber,
          pvStringCode: this.pvClusterNumber,
          diagDayStart: this.form.checkTime && this.form.checkTime[0] ? moment(this.form.checkTime[0]).format('YYYY-MM-DD') + ' 00:00:00' : '',
          diagDayEnd: this.form.checkTime && this.form.checkTime[1] ? moment(this.form.checkTime[1]).format('YYYY-MM-DD') + ' 23:59:59' : '',
          inspectDayEnd:this.form.taskStartTime && this.form.taskStartTime[1] ? moment(this.form.taskStartTime[1]).format('YYYY-MM-DD') + ' 23:59:59' : '',
          inspectDayStart: this.form.taskStartTime && this.form.taskStartTime[0] ? moment(this.form.taskStartTime[0]).format('YYYY-MM-DD') + ' 00:00:00' : '',
          modelTypeList: title.join(','),
          inspectTaskCode: this.form.taskNumber,
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          oirFileName: this.form.fileName,
          fileRemark: this.form.describe,
          stringDescribeInfo: this.form.stringDescribeInfo,
          diagTaskCode: this.form.diagTaskCode
        }).then(res => {
          this.loading = false
          if (res && res.status === 200 && res.data.code === 200) {
            this.total = res.data.count
            if (res.data.data && res.data.data.downloadFileName) {
              this.downloadFileName = res.data.data.downloadFileName
            }
            this.tableData = res.data.data.list || []
          } else {
            this.$message.error('后台接口错误！')
          }
        }).catch(err => {
          this.loading = false
        })
      },
      downloadFile() {
        if (!this.downloadFileName) {
          this.$message.error('没有数据，无法下载！')
          return
        }
        window.open('/bigdata-pv-backend/diagtask/downloadDataTable?downloadFilename=' + this.downloadFileName)
      },
      // handleSelectionChange(selection) {
      //   this.selection = selection
      // },
      // handleSizeChange(pageSize) {
      //   this.pageSize = pageSize
      //   this.currentPage = currentPage
      // },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.listSearch()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pvModuleResultDetail{
    padding: 10px 20px;
    .searchLine{
      .searchItem{
        display: inline-block;
        vertical-align: top;
      }
      .bigItem{
        width: 100%;
      }
    }
    .pagination{
      text-align: center;
      margin-top: 20px;
    }
    .lineBar{
      width: 100%;
      display:flex;
      flex-wrap: wrap;
      margin-top: 10px;
      padding-right: 450px;
      position: relative;
      .rightTitle{
        position: absolute;
        right: 285px;
        top:10px;
        color:#3977F3;
        font-size: 16px;
        z-index:999;
        font-weight: 600;
      }
      .line {
        flex: 1;
        height: 300px;
        margin-right: 10px;
        background: #fff;
        border-radius: 10px;
      }
      .bar {
        position: absolute;
        width: 450px;
        right:0;
        top:0;
        height:300px;
        background: #fff;
        border-radius: 10px;
        min-width: 450px;
      }
    }
    .title{
      font-size: 18px;
      margin-bottom: 10px;
      color:#3977F3;
      font-weight: bold;
      span{
        cursor: pointer;
        font-size: 14px;
        margin-left: 20px;
      }
    }
    .el-form-item{
      margin-bottom: 3px !important;
    }
    .btn{
      color:#409EFF;
      cursor: pointer;
      margin-right: 10px;
    }
  }
</style>
